<template>
  <div>
    <div class="item" @click="ChangeMessageInput" v-show="!isshow">
      {{ text }}
    </div>
    <input
      ref="inputRef"
      class="item edit"
      v-model="ChangeItem"
      v-show="isshow"
      @blur="ChangeMessageOnblur"
    />
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      isshow: false,
      ChangeItem: this.text,
    };
  },
  methods: {
    ChangeMessageInput() {
      this.isshow = true;
      this.$nextTick(() => {
        this.$refs.inpitRef.focus();
      });
    },
    ChangeMessageOnblur(text, index) {
      this.isshow = false;
      this.$emit("change", this.ChangeItem, this.index);
    },
  },
};
</script>

<style scoped>
.item {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #40b883;
  color: white;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
  margin-left: 200px;
}
.edit {
  background: white;
  color: red;
}
</style>